<template>
<!--批量修改小费界面-->
<el-dialog :title="$t('todaysales.batchEditTipDialog.title')" :visible.sync="dialogFormVisible" width="300" :close-on-click-modal="false" @close="closeDialog">
    <el-form label-position="left" label-width="150px" :model="batchEditTipForm" ref="batchEditTipForm" :rules="batchEditTipFormRules">
        <el-table :data="orders" highlight-current-row v-loading="listLoading" style="width:100%;" stripe border height="250">
            <el-table-column prop="orderNum" :label="$t('todaysales.table.ordernumColumnName')" width="200">
            </el-table-column>
            <el-table-column prop="staffName" :label="$t('todaysales.table.staffColumnName')" min-width="200">
            </el-table-column>
            <el-table-column prop="totalPrice" :label="$t('todaysales.table.moneyColumnName')" min-width="200">
            </el-table-column>
            <el-table-column prop="tip" :label="$t('todaysales.table.tipColumnName')" min-width="200">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.tip" width="90%" :placeholder="$t('todaysales.batchEditTipDialog.content')"></el-input>
                </template>
            </el-table-column>
        </el-table>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-row>
            <el-col :span="12" style="text-align:left;margin-bottom:15px;color:gray;">
                {{$t("todaysales.batchEditTipDialog.querySaleDateLabel")}}
                <el-date-picker type="date" :placeholder="$t('todaysales.batchEditTipDialog.querySaleDateTip')" v-model="querySaleDate" @change="pickerSaleDateEvent"></el-date-picker>
            </el-col>
            <el-col :span="12">
                <el-button @click="closeDialog">{{$t("todaysales.batchEditTipDialog.cancelBtn")}}</el-button>
                <el-button type="primary" @click="batchEditTipEvent">{{$t("todaysales.batchEditTipDialog.confirmBtn")}}</el-button>
            </el-col>
        </el-row>
    </div>
</el-dialog>
</template>

<script>
import util from '../../common/js/util';
import {
    getOnedaySales,
    batchEditOrderTip
} from '../../api/api';
import jwt_decode from 'jwt-decode';

export default {
    data() {
        return {
            staffId: '',
            orders: [],
            total: 0, //列表总条数
            pageSize: 1000, //每页条数
            currentPage: 1, //当前页码
            batchEditTipForm: {
                tip: 0,
                orderNum: ""
            },
            batchEditTipFormRules: {
                giftcardNo: [{
                    required: true,
                    message: this.$t("collectmoney.dialog.giftCardCheckout.form.validMsg.noinputGiftCard"),
                    trigger: 'blur'
                }]
            },
            querySaleDate: new Date(),
            showValidGiftcardData: false,
            dialogFormVisible: false,
            listLoading: false
        }
    },
    mounted() {
        if (sessionStorage.getItem('userToken') != null) {
            var userToken = jwt_decode(sessionStorage.getItem("userToken"));
            if (userToken.roleId == 1) {
                this.staffId = userToken.userid;
            }
        }
    },
    methods: {
        //显示界面
        showPage() {
            this.getOrders();
            this.dialogFormVisible = true;
        },
        getOrders() {
            this.querySaleDate = (!this.querySaleDate || this.querySaleDate == '') ? '' : util.formatDate.format(new Date(this.querySaleDate), 'yyyy-MM-dd');

            let para = {
                saleDate: util.formatDate.format(new Date(this.querySaleDate), 'yyyy-MM-dd')
            };
            getOnedaySales(para).then(res => {
                let {
                    msg,
                    code
                } = res;
                if (code !== "0") {
                    this.$message({
                        message: msg,
                        type: 'error'
                    });
                } else {
                    this.orders = res.data;
                    this.listLoading = false;
                }
            });
        },
        pickerSaleDateEvent() {
            this.getOrders();
        },
        batchEditTipEvent() {
            let batchEditOrderTipArr = [];
            for (var i = 0; i < this.orders.length; i++) {
                var orderTip = {};
                orderTip.orderId = this.orders[i].id;
                orderTip.tip = this.orders[i].tip;
                batchEditOrderTipArr.push(orderTip);
                // console.log("ordernum:" + orderTip.orderId + ",tip:" + orderTip.tip);
            }
            // console.log("ordertip:" + batchEditOrderTipArr);
            let para = batchEditOrderTipArr;
            batchEditOrderTip(para).then(res => {
                let {
                    msg,
                    code
                } = res;
                if (code !== "0") {
                    this.$message({
                        message: msg,
                        type: 'error'
                    });
                } else {
                    this.listLoading = false;
                    this.dialogFormVisible = false;
                    //TODO:更新主页获取订单列表(一层parent为何变为2层，有歧义)
                    this.$parent.$parent.getOrders();
                }
            });
        },
        // 对话框关闭事件
        closeDialog() {
            // 点击关闭 数据重置
            this.$refs.batchEditTipForm.resetFields();
            this.dialogFormVisible = false;
        }
    }
}
</script>

<style scoped>
</style>
